<template>
  <div>
    <div class="cont">
      <input class="inp" v-model="ele" type="text" placeholder="用户名称" />
      <el-button @click="search()">搜索</el-button>
      <!-- 上方按钮 -->
      <div class="top">
        <!-- <button>修改</button> -->
        <button @click="open()">删除</button>
      </div>
      <!-- 下方表格 -->
      <div class="down">
        <el-table
          ref="multipleTable"
          :data="tableData3"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>

          <el-table-column prop="userName" label="用户账号" width="120" align="center">
          </el-table-column>
          <el-table-column prop="nickName" label="用户昵称" width="120" align="center">
          </el-table-column>
          <el-table-column
            prop="userType"
            label="用户类型"
            show-overflow-tooltip
            align="center"
          >
          </el-table-column>
          <el-table-column prop="email" label="用户邮箱" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column
            prop="phonenubmber"
            label="手机号码"
            show-overflow-tooltip
            align="center"
          >
          </el-table-column>
          <el-table-column prop="sex" label="用户性别" show-overflow-tooltip align="center">
            <template slot-scope="scope">
              <span v-text="scope.row.sex === 1 ? '男' : '女'"></span>
            </template>
          </el-table-column>
          <el-table-column prop="password" label="密码" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="remark" label="备注" show-overflow-tooltip>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 20, 30, 40]"
            :page-size="sizes"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
    </div>
  </div>
</template>

<script>
import { UerApi, UserDel } from "../request/api";
export default {
  data() {
    return {
      tableData3: [],
      ele: "",
      newArr: "",
      dialogTableVisible: false,
      dialogFormVisible: false,
      dialogFormVisible1: false,
      form: {
        //修改
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "120px",
      terminalId: "",
      model: "",
      protocol: "",
      companyType: "",
      gather: "",
      batchNumber: "",
      id: "",
      currentPage: 1,
      total: 0,
      sizes: 10,
      val1: null,
      val2: null,
    };
  },
  created() {},
  mounted() {
    this.getList()
  },
  methods: {
    search() {
      UerApi({ userName: this.ele }).then((res) => {
        this.tableData3 = res.data.data.records;
      });
    },
    del() {
      let arr2 = this.newArr;
      let arr3 = arr2.toString();
      UserDel({ ids: arr3 }).then((res) => {
        this.msg(res)
        this.getList()
      });
    },
    handleSelectionChange(val) {
      // 获取id
      let newArr = val.map((item) => {
        return item.userId;
      });
      this.newArr = newArr;
    },

    getList() {
      UerApi().then((res) => {
        this.tableData3 = res.data.data.records;
        this.total = res.data.data.total
        if(res.data.code ==500){
          alert("登录已过期")
        this.$router.push("/")
      }
      });
    },
    msg(res){
      if(res.data.code == 0){
           this.$message({
              message: res.data.msg,
              type: "success",
            });
        }else{
            this.$message({
              message: res.data.msg,
              type: "error",
            });
        }
    },
    handleSizeChange(val) {
      this.val1 = val
      UerApi({
        currentPage: this.currentPage,
        pageSize: this.val1,
      }).then((res) => {
        this.tableData3 = res.data.data.records;
        this.total = res.data.data.total;
      });
    },
    handleCurrentChange(val) {
      this.val2 = val;
      UerApi({
        currentPage: this.val2,
        pageSize: this.val1,
      }).then((res) => {
        this.tableData3 = res.data.data.records;
      });
    },
    open() {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.del()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      }
  },
};
</script>

<style scoped lang="less">
.cont {
  width: 100%;
  max-height: 2000px;
  background-color: #fff;
  margin-top: 20px;
  .inp {
    height: 35px;
    width: 40%;
    padding-left: 30px;
    line-height: 35px;
    background-color: #f2fafe;
    border: none;
  }
  .inp::-webkit-input-placeholder {
    color: #acdbef;
  }
  .top {
    margin: 20px 0 0 20px;
    display: flex;
    justify-content: flex-start;
    button {
      margin-right: 10px;
      width: 60px;
      height: 30px;
      border: 2px solid #008ecb;
      color: #008ecb;
      font-size: 12px;
      background-color: #fff;
    }
  }
  .inpe {
    height: 35px;
    width: 40%;
    padding-left: 30px;
    line-height: 35px;
    background-color: #fff;
    border: 1px solid #eaeaea;
  }
  .el-table {
    .el-table::-webkit-scrollbar {
      display: none;
    }
  }
}
</style>
<style lang='less'>
</style>
